<template>
  <div class="addDialog">
    <el-dialog
      :title="$t('add')"
      :visible.sync="dialogFormVisible"
      :before-close="closeDialog"
      :close-on-click-modal="false"
      width="25%"
    >
      <el-form
        ref="ruleForm"
        :model="addForm"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item :label="$t('equipmentType')" prop="EqpType">
          <el-select
            v-model="addForm.EqpType"
            clearable
            @change="getByTypeEqpNameList"
          >
            <el-option
              v-for="item in eqpList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('deviceAlias')" prop="eqpId">
          <el-select v-model="addForm.eqpId" clearable>
            <el-option
              v-for="item in layoutIdList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('marginLeft')" prop="left">
          <el-input v-model="addForm.left"/>
        </el-form-item>
        <el-form-item :label="$t('marginTop')" prop="top">
          <el-input v-model="addForm.top"/>
        </el-form-item>
        <el-form-item :label="$t('DeviceWidth')" prop="width">
          <el-input v-model="addForm.width" :disabled="true"/>
        </el-form-item>
        <el-form-item :label="$t('DeviceHeight')" prop="height">
          <el-input v-model="addForm.height" :disabled="true"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button icon="el-icon-receiving" type="primary" @click="doAdd('ruleForm')">{{ $t('confirm') }}</el-button>
        <el-button icon="el-icon-delete" @click="resetForm('ruleForm')">{{ $t('reset') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import layoutApi from '@/api/production/layoutDesign'
import mySetting from '@/mixins/mySetting'
import networkTips from '@/mixins/networkTips'

export default {
  name: 'AddDialog',
  components: {},
  mixins: [mySetting, networkTips],
  data() {
    return {
      dialogFormVisible: false,
      addForm: {
        layoutId: this.$route.params.LayoutId,
        width: 100,
        height: 100
      },
      layoutIdList: [],
      eqpList: [],
      rules: {
        left: [
          { required: true, message: this.$t('warnMarginLeft'), trigger: 'blur' }
        ],
        top: [
          { required: true, message: this.$t('warnMarginTop'), trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 确认添加
    async doAdd(val) {
      await this.validationForm(val, this.newAdd)
    },
    newAdd() {
      const { layoutId, left, top, width, height, eqpId } = this.addForm
      layoutApi.newAdd({ layoutId, left, top, width, height, eqpId }).then((res) => {
        this.doMerge(res)
        this.closeDialog()
        this.$emit('getLayoutEqps')
      })
    },
    // 获取设备类型列表
    async getEquipmentTypesList() {
      const res = await layoutApi.getEquipmentTypesList()
      this.eqpList = res.data
    },
    // 设备别名列表
    getByTypeEqpNameList() {
      layoutApi
        .getByTypeEqpNameList({ EqpType: this.addForm.EqpType, LayoutId: this.$route.params.LayoutId })
        .then((res) => {
          this.layoutIdList = res.data
        })
    },
    // 关闭弹窗
    closeDialog() {
      Object.assign(this.$data, this.$options.data.call(this))
    },
    // 打开弹窗
    openDialog() {
      this.getEquipmentTypesList()
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['ruleForm'].clearValidate()
      })
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style lang='scss' scoped>
.el-select {
  width: 100%;
}
</style>
